import React, { useState, useEffect ,useMemo } from 'react';


function Memo(){
    const [state1,setState1] = useState('状态一')
    const [state2,setState2] = useState('状态二')

    return(
        <div>
            <button onClick={()=>setState1(Date.now())}>状态一</button>
            <button onClick={()=>setState2(Date.now())}>状态二</button>
            <MemoChildrens name={state1}>{state2}</MemoChildrens>
        </div>
    )
}

function MemoChildrens({name,children}){
    // console.log(name,children)
    function handleClick(name){
        console.log('点击执行')
        return name 
    }
    //!控制当name状态一发生变化 ，该函数才知晓，因为状态二和该函数没有关系
    const actionState1 = useMemo(()=>handleClick(name),[name])
    return(
        <>
            <div>{actionState1} 状态一</div>
            <div>{children} 状态二 </div>
        </>
    )
}

export default Memo;